<template>
    <div>
        <a-card>
            <div class="mb-sixteen pagesList">
                <a-table bordered :rowKey="(record, index) => {
                return index;
            }
                " :columns="columns"
                    :data-source="list" :pagination="false" :scroll="{ x: 'max-content' }">
                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.size"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

    </div>
</template>

<script>
// import {dataSource as ds} from "@/services";
import {getSensorPageDate} from "@/services/device";

export default {
    name: "monitoring",
    data() {
        return {
            columns:[
              {
                title: '监测时间',
                dataIndex: 'create_time',
              },
              {
                title: '温度',
                dataIndex: 'temper',
              },
              {
                title: '密度',
                dataIndex: 'dens',
              },
              {
                title: '粘度',
                dataIndex: 'vis',
              },
              {
                title: '介电常数',
                dataIndex: 'diel',
              },
              {
                title: '含水量',
                dataIndex: 'ppm',
              }
            ],
            list: [{ id: 1, name: '名称名称' },{id:2}],
            id:'',
            searchForm: {
                page: 1,
                size: 15
            },
            isColumn:false,
            total: 20,
        }
    },
  mounted() {
      this.getData();
      this.id=this.$route.query.id
  },
  methods: {
      getData() {
        this.list=[]
        let data={
          page_number: this.searchForm.page,
          sensorSn:this.$route.query.id,
          page_size: this.searchForm.size
        }
        getSensorPageDate(data).then((res) => {
         let list=res.pagesList
          let arr=['fe1','fe2','fe3','fe4','fe5','fe6','fe7','fe8','fe9','fe10','nfe1','nfe2','nfe3','nfe4']
          let obj2=res.pagesList[0];
         if(!this.isColumn){
           for(let i in arr){
             let column={
               title: Object.keys(obj2[arr[i]])[0],
               dataIndex: Object.keys(obj2[arr[i]])[0]
             };
             this.columns.push(column)
           }
           this.isColumn=true;
         }


          for(let i in list){
            for(let t in arr){
              let obj=list[i][arr[t]];
              let key =Object.keys(obj)[0];
              list[i][key]=obj[key]
            }
          }
          this.list = list
          this.total =Number(res.pages.pageCounts)*this.searchForm.size;


        }).catch(() => {

        });
      },

        showSizeChange(current, pageSize) {
            this.searchForm.size = pageSize;
            this.getData()
        },
        handlePageNo(current) {
            this.searchForm.page = current;
            this.getData()
        },
    }
}
</script>
<style scoped lang="less">
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

.modalcss {
    /deep/ .ant-table {
        color: #CFD2E8;
    }
   /deep/ .ant-table-thead > tr > th{
        color: #CFD2E8;
        background: #6D7090 !important;
        border-bottom: 1px solid #7D81A6;
    }
    /deep/ .ant-table-tbody > tr > td{
    background-color: #5C5F7D !important;
    border-bottom: 1px solid #7D81A6 !important;
    }
    /deep/ .ant-table-bordered .ant-table-thead > tr > th,  /deep/ .ant-table-bordered .ant-table-tbody > tr > td{
        border-right: 1px solid #7D81A6 !important;
    }
    /deep/ .ant-table-bordered .ant-table-header > table, /deep/ .ant-table-bordered .ant-table-body > table,/deep/ .ant-table-bordered .ant-table-fixed-left table,/deep/ .ant-table-bordered .ant-table-fixed-right table{
        // border: 1px solid #7D81A6;
        border-color: #7D81A6;
        border-right: none;
        border-bottom: none;
    }
    //
}
</style>
